<template>
  <div v-if="tableData.length > 0" class="container">
    <div class="column-tit001">
      <p>考试中心</p>
      <div class="more001">
        <span>查看更多</span>
      </div>
    </div>
    <div class="notice-list">
      <div class="notice-item" v-for="item in tableData" :key="item.id" @click="showDetail(item)">
        <div class="bottom-info">
          <div class="title">{{item.name}}</div>
          <div class="description">{{item.description}}</div>
          <div class="time">{{item.startTime}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { selectExamPageExam } from '@/api/examination'

const queryData = ref({})
const tableData = ref([]);
const defaultForm = reactive({
  currentPage: 1,
  pageSize: 4,
  name: "",
  status: "NORMAL",
  businessKey: "",
  timeLimit: true,
  creator: "",
  accessMode: "PUBLIC"
})
Object.assign(queryData.value, defaultForm);

const getData = async () => {
  const res = await selectExamPageExam(queryData.value)
  tableData.value = res.data.list
  console.log("tableData",tableData.value);
}
onMounted(() => {
  getData()
})
</script>

<style lang='scss' scoped>
.container{
  margin:  px2rem(80) 0 ;
  .column-tit001{
    display: flex;
    justify-content: space-between;
  }
  .notice-list{
    margin-top: px2rem(40);
    display: flex;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    gap: px2rem(20);
    .notice-item{
      width: calc(25% - 0.2rem);
      box-sizing: border-box;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      transition: all 0.3s;
    
      .bottom-info{
        padding: px2rem(20);
        .title{
          font-size: px2rem(18);
          color: $black;
          @include textEllipsis(27, 1);
        }
        .description{
          margin-top: px2rem(10);
          font-size: px2rem(16);
          color: #666;
          @include textEllipsis(24, 1);
        }
        .time{
          color: #666;
          font-size: px2rem(16);
          margin-top: px2rem(10);
        }
      }
      &:hover{
        box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
        .img-box img{
          transform: scale(1.1);
        }
        .bottom-info .title{
          color: $mainColor;
        }
      }
    }
  }
}
</style>